<!DOCTYPE html>
<html style="width: 100%;height: 100%;margin-left: 0px">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>
          左边列表
        </title>
    </head>
    <script>




    </script>
    <body style="width: 100%;height: 100%;margin-top: 0px;margin-left: 0px;padding-top: 0px">
    <script src="/approval/static/js/jquery-3.4.1.min.js"></script>
    <script src="/approval/static/js/vue-2.4.0.js"></script>
    <link type="text/css" rel="stylesheet" href="/approval/static/css/bootstrap.min.css"/>
    <script>
        $(document).ready(function (){
                var app=new Vue({
                    el:"#app",
                    data:{
                        a1:"active",
                        a2:"",
                        a3:""
                    },
                    methods:{
                        clickLi:function (message){
                            if (message=='a1'){
                                this.a2=this.a3="";
                                this.a1="active";
                            }else if(message=="a2"){
                                this.a1=this.a3="";
                                this.a2="active";
                            }else if (message=="a3"){
                                this.a2=this.a1="";
                                this.a3="active";
                            }
                        }
                    }
                })
        })
    </script>
        <div class="container-fluid" id="app">
            <!-- Stack the columns on mobile by making one full-width and the other half-width -->
            <ul class="nav nav-pills nav-stacked">
                <li  v-bind:class="a1" @click="clickLi('a1')"><a href="/approval/static/html/Stuff_Information.html" target="right">我的</a></li>
                <li v-bind:class="a2" @click="clickLi('a2')"><a href="/approval/static/html/ApprovalAdd.html" target="right">申请提交</a></li>
                <li v-bind:class="a3" @click="clickLi('a3')"><a href="/approval/static/html/ApprovalDetail.html" target="right">申请列表</a></li>
            </ul>
        </div>
    </body>
</html>